{{-- 继承布局模板 --}}
@extends( 'version-2017.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('version-2017/css/production.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>满天星验光配镜智能一体机-广州便雅悯视光网络科技公司</title>
@endsection


@section('content')
    <!-- 海报 -->
    <section class="banner optometry"></section>

    <!-- 页面导航 -->
    <section class="navigation">
        <ul class="navigation-list bym-not-list bym-wrapper clearfix">
            <li class="navigation-list-item">
                <a href="#introduction">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-introduction.png"
                             alt="">
                    </i>
                    <p class="item-name">产品介绍</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#scenario">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-scenario.png"
                             alt="">
                    </i>
                    <p class="item-name">应用场景</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#configure">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-configure.png"
                             alt="">
                    </i>
                    <p class="item-name">尺寸+配置</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#function">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-function.png"
                             alt="">
                    </i>
                    <p class="item-name">产品功能</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#advantage">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-advantage.png"
                             alt="">
                    </i>
                    <p class="item-name">核心优势</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#partner">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-case.png"
                             alt="">
                    </i>
                    <p class="item-name">客户案例</p>
                </a>
            </li>

        </ul>
    </section>

    <!-- 产品介绍 -->
    <section class="introduction optometry" id="introduction">
        <div class="bym-wrapper">
            <div class="introduction-header">
                产品介绍
            </div>
            <div class="introduction-title">
                满天星验光配镜智能一体机
            </div>
            <p class="introduction-desc">
                眼镜行业首款真正全面实现验光网络配镜、数据与商城同步联动，定制搭配、
                护理维修等综合功能的高科技产品，一台满天星验光配镜智能一体机就是一个可移动的、
                完整的微型眼镜店，实现线上线下联动，推动整个眼镜行业的转型升级。
            </p>
            <div class="introduction-picture"></div>
            <ul class="introduction-list bym-not-list">
                <li class="introduction-list-item">BA01A1型机器</li>
                <li class="introduction-list-item">BA01A2型机器</li>

            </ul>
        </div>
    </section>
    <!-- 产品介绍 end -->

    <!-- 场景 -->
    <section class="scenario optometry" id="scenario">

        <div class="bym-wrapper">
            <div class="scenario-header">
                应用场景
            </div>
            <ul class="scenario-list bym-not-list clearfix">
                <li class="scenario-list-item" v-for="item in categoryList" :key="item.id" :class="[item.id === activeId ? 'active': '']" @mouseenter="activeHandle(item.id)">
                    <div class="item-container">
                        <div class="item-normal">
                            <div class="item-normal-cover">
                                <img :src="item.cover" alt="">
                            </div>
                            <h4 class="item-normal-name" v-text="item.title"></h4>
                            <p class="item-normal-summary" v-text="item.summary.join('，')"></p>
                        </div>
                        <div class="item-reverse">
                            <p class="item-reverse-en" v-text="item.name"></p>
                            <dl class="bym-not-list">
                                <dt v-text="item.title"></dt>
                                <dd v-for="childCategory in item.summary" v-text="childCategory"></dd>

                            </dl>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </section>
    <!-- 场景 end -->

    <!-- 配置 -->
    <section class="configure optometry" id="configure">
        <div class="bym-wrapper">

            <div class="configure-header">
                尺寸+配置
            </div>
            <div class="configure-size">

                <div  :class="['configure-size-picture','part-1', part1Show? 'active': '']" ref="part1">
                    <div class="configure-size-picture-mask">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_013.png" alt="">
                    </div>
                </div>
                <ul class="configure-size-list bym-not-wrapper">
                    <li class="configure-size-list-item">
                        <h4 class="item-name">BA01A1型</h4>
                        <p class="item-argument">180CM*120CM*240CM</p>
                    </li>
                    <li class="configure-size-list-item">
                        <h4 class="item-name">BA01A2型</h4>
                        <p class="item-argument">190CM*160CM*250CM</p>
                    </li>
                </ul>
                <div :class="['configure-size-picture', 'part-2', part2Show? 'active': '']" ref="part2">
                    <div class="configure-size-picture-mask">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_015.png" alt="">
                    </div>
                    <div class="configure-size-picture-mask mask-2">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_016.png" alt="">
                    </div>
                </div>
            </div>
            <div class="configure-hardware">
                <h3 class="configure-hardware-title">
                    配置硬件
                </h3>
                <ul class="configure-hardware-list bym-not-list">
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/yejingping_machine_img.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">虚拟试戴屏幕</h5>
                                <p class="item-content-desc"></p>
                            </div>
                            <div class="item-content-summary">
                                提供眼镜虚拟试戴、验光配镜、在线购买一站式服务。系统功能强大，操作简单。
                            </div>
                        </div>
                    </li>
                    <li class="item animation-disabled">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_018.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">综合验光仪</h5>
                                <p class="item-content-desc">(可自行选择)</p>
                            </div>
                            <div class="item-content-summary">
                                满天星验光配镜智能一体机上可供人工精确验光的验光仪
                            </div>
                        </div>
                    </li>
                    <li class="item animation-disabled">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_019.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">电脑验光仪</h5>
                                <p class="item-content-desc">（可自行选购）</p>
                            </div>
                            <div class="item-content-summary">
                                利用电脑来测试视力的验光仪
                            </div>
                        </div>
                    </li>
                    <li class="item animation-disabled">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_020.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">焦度计</h5>
                                <p class="item-content-desc">(可自行选购)</p>
                            </div>
                            {{--<div class="item-content-summary">--}}
                                {{--要用于测量眼镜片（包括角膜接触镜片）的顶焦度、棱镜度，确定柱镜片的柱镜轴位方向，在未切边镜片上打印标记并可检查镜片是否正确安装在镜架中的仪器--}}
                            {{--</div>--}}
                        </div>
                    </li>
                    <li class="item animation-disabled">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_021.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">插片箱</h5>
                                <p class="item-content-desc">(可自行选购)</p>
                            </div>
                            {{--<div class="item-content-summary">--}}
                                {{--放置眼镜插片--}}
                            {{--</div>--}}
                        </div>
                    </li>
                    <li class="item animation-disabled">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_022.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">液晶视力表</h5>
                                <p class="item-content-desc"> (可自行选购)</p>
                            </div>
                            {{--<div class="item-content-summary">--}}
                                {{--供消费者测试视力的视力表--}}
                            {{--</div>--}}
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_023.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">业务管理pad
                                    </h5>
                                <p class="item-content-desc"></p>
                            </div>
                            <div class="item-content-summary">
                                用于业务员创建订单、管理订单和填写验光数据。
                            </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_024.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">广告屏</h5>
                                <p class="item-content-desc">（仅适用于BA01A2）</p>
                            </div>
                            <div class="item-content-summary">
                                支持图片、文字、视频等文件格式，可用于产品活动宣传或店铺品牌推广。
                            </div>
                        </div>
                    </li>
                    <li class="item animation-disabled">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_025.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">魔术箱</h5>
                                <p class="item-content-desc">（可自行选择）</p>
                            </div>
                            {{--<div class="item-content-summary">--}}
                                {{--液晶视力表--}}
                            {{--</div>--}}
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </section>
    <!-- 配置 end-->

    <!-- 功能 -->
    <section class="function" id="function" id="function">
        <div class="function-header">
            产品功能
        </div>

        <!-- Swiper -->
        <div class="function-content">
            <div class="swiper-container" id="function_swiper">
                <div class="swiper-wrapper">

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h3 class="item-number">01/07</h3>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/yidongyanjingdian_function_img.jpg"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">可移动眼镜店</h4>
                                <p class="item-text-summary">虚拟试戴、验光配镜、在线销售</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">01/07</h4>
                                <h6 class="item-text-en">MOBILE OPTICAAL STORE</h6>
                                <h5 class="slide-cotnent-title">可移动眼镜店</h5>
                                <p class="slide-cotnent-desc">
                                    一台一体机包含验光、配镜、销售等所有业务流程。各类镜架、镜片、护理产品等眼镜店里的所有产品均可展示，
                                    还可为顾客提供维修、护理等售后服务。
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h3 class="item-number">02/07</h3>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/xunishidai_function_img.jpg"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">眼镜虚拟试戴</h4>
                                <p class="item-text-summary">用户3D试戴，眼镜选型选款</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">02/07</h4>
                                <h6 class="item-text-en">VIRTUAL TRY-ON</h6>
                                <h5 class="slide-cotnent-title">眼镜虚拟试戴</h5>
                                <p class="slide-cotnent-desc">通过以假乱真的眼镜试戴效果为消费者提供了直观的试戴消费体验，
                                    3D试戴、2D试戴、试戴对比、一键试戴，可以让消费者快速选择心仪的款式，提高成交率。 </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h3 class="item-number">03/07</h3>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/dingzhi_function_img.jpg"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">验光配镜</h4>
                                <p class="item-text-summary">配镜定制、管理验光单、搭配镜片、眼睛复查</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">03/07</h4>
                                <h6 class="item-text-en">CUSTOMIZATION</h6>
                                <h5 class="slide-cotnent-title">验光配镜</h5>
                                <p class="slide-cotnent-desc">采用先进的综合检眼仪验光，验光数据联动共享，
                                    系统自动为消费者管理验光数据直至下次更新。</p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h3 class="item-number">04/07</h3>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/yanguangpeijing_function_img.jpg"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">产品定制</h4>
                                <p class="item-text-summary">个性化定制服务</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">04/07</h4>
                                <h6 class="item-text-en">PRODUCT CUSTOMIZATION</h6>
                                <h5 class="slide-cotnent-title">产品定制</h5>
                                <p class="slide-cotnent-desc">根据验光数据、镜架的材质与工艺以及镜片度数的要求，
                                    帮助特殊需求的用户实现个性化定制服务，搭配最优组合产品。</p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h3 class="item-number">05/07</h3>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/xunicang_function_img.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">虚拟仓库</h4>
                                <p class="item-text-summary">减少库存积压，实现零库存卖货</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">05/07</h4>
                                <h6 class="item-text-en">VIRTUAL WAREHOUSE</h6>
                                <h5 class="slide-cotnent-title">虚拟仓库</h5>
                                <p class="slide-cotnent-desc">生产商将眼镜产品入驻到一体机，为商家提供无限优质库存，实现“永不断货”。
                                    商家通过虚拟仓库向顾客售卖眼镜，扩大了顾客的商品选择面，有效提高商品成交率，通过利润分成实现收益。</p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h3 class="item-number">06/07</h3>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/weixinyingxiao_function_img.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">微商城营销</h4>
                                <p class="item-text-summary">打通线上营销渠道，实现线上线下联动</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">06/07</h4>
                                <h6 class="item-text-en">WECHAT MARKETING</h6>
                                <h5 class="slide-cotnent-title">微商城营销</h5>
                                <p class="slide-cotnent-desc">打通线上营销渠道，无限扩大销售机会，实现线上线下联动。
                                    管理系统与营销系统并用，联结供应商、加盟商和营业员的利润分成，实现互利共赢。</p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h3 class="item-number">07/07</h3>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/yuanchengjiankong_function_img.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">远程视频监控</h4>
                                <p class="item-text-summary">帮助商家实时了解和维护机器运营状况</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">07/07</h4>
                                <h6 class="item-text-en">VIDEO SURVEILLANCE</h6>
                                <h5 class="slide-cotnent-title">远程视频监控</h5>
                                <p class="slide-cotnent-desc">通过视频远程监控一体机现场业务情况，对现场业务情况进行实时的了解和反馈，
                                    便于商家管理和维护一体机运营。</p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                </div>
            </div>
            <div class="swiper-button-next" id="function_next"></div>
            <div class="swiper-button-prev" id="function_prev"></div>
        </div>
    </section>
    <!-- 功能 END -->

    <!-- 优势 -->
    <section class="advantage optometry" id="advantage">

        <div class="bym-wrapper">
            <div class="advantage-header">
                产品优势
            </div>

            <ul class="advantage-list bym-not-list clearfix">
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_032.png" title="" />
                    </i>
                    <h4 class="item-title">降低开店成本</h4>
                    <p class="item-desc">占地面积小（3平米），功能齐全，一个验光师即可完成所有业务流程，节省店铺租金和人工成本。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_032-1.png" title="" />
                    </i>
                    <h4 class="item-title">实现零库存开店</h4>
                    <p class="item-desc">虚拟货仓眼镜由厂家直接供应，斩断中间商暴利环节。零库存售货模式能有效解决商品折旧损耗及库存积压问题。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_033.png" title="" />
                    </i>
                    <h4 class="item-title">提高商品成交率</h4>
                    <p class="item-desc">利用眼镜虚拟试戴技术帮助消费者快速选型选款，提高购物体验。结合产品小机身可移动的优势，将店铺开在人流量最大的地方，如学校、药店、商场、超市......最大程度提高商品成交率。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_034.png" title="" />
                    </i>
                    <h4 class="item-title">打通线上营销渠道</h4>
                    <p class="item-desc">满天星一体机与微信商城配套使用。凡在机器上体验虚拟试戴、免费验光及下单购买的客户都将成为商家微信商城的潜在客户。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_035.png" title="" />
                    </i>
                    <h4 class="item-title">帮助商家营销推广</h4>
                    <p class="item-desc">机器通过业务逻辑设计帮助商家自动积累粉丝进行精准营销；微信分销系统让每一位粉丝都变成商家的免费促销员，帮助推广店铺和产品。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_036.png" title="" />
                    </i>
                    <h4 class="item-title">实现O2O营销模式</h4>
                    <p class="item-desc">一体机线下销售眼镜、提供免费验光及售后服务，微商城线上营销，线上线下结合，相互导流，提高销售转化率。</p>
                </li>
            </ul>
        </div>

    </section>
    <!-- 优势 end-->


    <!-- 合作伙伴 -->
    <section class="partner" id="partner">

        <div class="bym-wrapper">
            <div class="partner-header">
                合作伙伴
            </div>

            <ul class="partner-list">
                <li class="partner-list-item">
                    <div class="item-picture">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_038.png" alt="">
                    </div>
                    <p class="item-name">曙光眼镜</p>
                </li>
                <li class="partner-list-item">
                    <div class="item-picture">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_039.png" alt="">
                    </div>
                    <p class="item-name">洁视明眸</p>
                </li>
                <li class="partner-list-item">
                    <div class="item-picture">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-optometry/Product_ygpjytj_cpgn_040.png" alt="">
                    </div>
                    <p class="item-name">敏悦科技</p>
                </li>
            </ul>
        </div>
    </section>
    <!-- 合作伙伴 END -->



@endsection

@section('script')
    <script type="text/javascript" src="{{asset('version-2017/js/production-optometry.js')}}"></script>
    <script type="text/javascript" src="{{asset('version-2017/js/production.js')}}"></script>
@endsection